<template>
  <div id="app">

    <navSimple class="nav"  message="商品详情"></navSimple>
   <div class="loadingbox" v-show="showLoading">
      
    <loading ></loading >
   </div>
    <div class="mainBox" >
      <div class="swiper-container">
          <div class="swiper-wrapper mainSwiper">
              <div class="swiper-slide" v-for="(img,num) in subImages"><img :src="resData.imageHost+img" key="num"></div>
              
             
          </div>
          <!-- 如果需要分页器 -->
          <div class="swiper-pagination swiper-pagination-black"></div>
          
          <div class="swiper-button-prev swiper-button-black"></div>
          <div class="swiper-button-next swiper-button-black"></div>
      </div>
      <div class="secoundContent">
         <div class="titleContent">
           <div class="title">
             {{resData.name}}
           </div>
           <div class="subtitle">
             {{resData.subtitle}}
           </div>
         </div>

         <div class="count">
          库存:{{resData.stock}}件
         </div>
         <div class="countContent">
           <i class="iconfont icon-subtract" @click="updatesNum('min')"></i><span>{{addCartNum}}</span><i class="iconfont icon-add" @click="updatesNum('add')"></i>
         </div>
        <div class="price">
          ￥{{resData.price}}
        </div>
        
    </div>
    <div class="loadingMoreDetail">
      <i class="iconfont icon-information"></i>上拉加载详情
    </div>
  </div>

  <div class="detailContent" v-show="detailData"  v-html="detailData">
        <loading></loading>
  </div>

  <div class="detailFooter">
    <div class="homebox boxes" @click="goHome()">
      <i class="iconfont icon-all" ></i><br/>
       <span>首页</span>
    </div>
    <div class="userbox boxes"  @click="goUser()">
        <i class="iconfont icon-account"></i><br/>
            <span>用户</span>
    </div>
    <div class="cartbox boxes" @click="goCart()">
       <i class="iconfont icon-cart" ></i><br/>
            <span >购物车</span>
       <div class="cartfloat" v-show="cartCount">
           <span>{{cartCount}}</span>
       </div>
    </div>
    <div class="gocheck boxes" @click="addToCart()">
      加入购物车
    </div>
  </div> 


  <div class="floatContent" v-show="showFloat">
       <router-view v-on:closeevent="showFloatBox()" v-on:loginSuccess="loginCallBack()">
 </router-view>
     </div>
      
    


  </div>
</template>

<script>
import 'common/css/reset.css';
import 'common/css/iconfont.css';
import 'common/css/swiper.min.css';
import 'common/css/swiper.min.js';
import navSimple from "components/units/navSimple"
import loading   from "components/loading/loading"
var _cart   =require("common/util/server/cart.js");
var _user   =require("common/util/server/userServer.js");
var _product=require("common/util/server/product.js");
var _mm     =require("common/util/mm.js");
  export default {
    name: 'detail',
   
    methods:{
        loginCallBack(){
          var _this= this;
          _cart.getCartCount(function(res){
                              _this.cartCount=res.data;
                        },function(err){
                          return
                        });
                  
        },
        addToCart(){
                     var _this=this;
                     this.showLoading=true;
                   _cart.addProduct({productId:_this.resData.id,count:_this.addCartNum},function(res){
                      console.log("prores");
                        _this.showLoading=false;
                              window.alert("添加成功");
                        _cart.getCartCount(function(res){
                              _this.cartCount=res.data;
                        },function(err){
                          return
                        });
                  


                    },function(err){
                        _this.changeRouter="/login";
                       _this.$router.push(_this.changeRouter);
                     _this.showFloat=true;
                    })
                    
                
        },
        updatesNum(info){
          var _this=this;
          console.log(info);
          if (info === 'add') {
                this.addCartNum++;
                if (this.addCartNum>= this.resData.stock) {
                  this.addCartNum= this.resData.stock
                }

          }else{
            this.addCartNum--;
            if (this.addCartNum <=1) {
              this.addCartNum=1;
            }

          }
        },
        goUser(){
          window.location.href="./user.html"
        },
        goHome(){
          _mm.goHome();
        },
        showFloatBox(){
                  this.showFloat=!this.showFloat;

              },
        goCart(){
                var _this=this;
                  _user.checkLogin(function(res){
                    console.log("alreadyLogin");
                      _this.changeRouter="/cart";
                      _this.$router.push(_this.changeRouter);
                  },function(err){
                    _this.changeRouter="/login"
                       _this.$router.push(_this.changeRouter);
                  });
                  
                  this.showFloat=true;

         },
        checkScroll(){
          var _this=this;
          if(!this.detailData){
            if((document.body.clientHeight-(window.scrollY+document.documentElement.clientHeight))<10){
                  _this.bottomScrollY=window.scrollY+document.documentElement.clientHeight;

                  _this.showDetail=true;
                  _this.detailData=_this.downloadData;
                  
                 }
          }
                
        },

    },
   
   
    updated(){
             this.showLoading=false;
          var mySwiperMain = new Swiper ('.swiper-container', {
                  direction: 'horizontal',
                  loop: true,
                  pagination: '.swiper-pagination',
                  nextButton: '.swiper-button-next',
                  prevButton: '.swiper-button-prev',
                  autoplay:4000,
                  
                })   
        if(this.showDetail){
          window.scroll(0,this.bottomScrollY);
           this.showDetail=false;

        }
             
    

    },
    watch:{
       '$route' (to, from) {
      // 对路由变化作出响应...
          if (to.path === "/") {
            
            this.showFloat=false;
          }

    }
    },
    created(){
      var _this=this;
     var productdata=this.productId;
      _product.getProductDetails({productId:productdata},function(res){
          _this.downloadData=res.data.detail;
                  _this.resData=res.data;
                  _this.subImages=res.data.subImages.split(",");
                  


      },function(err){
          //////////////////////////////////这里还有问题呀Wie

      });

 
        _cart.getCartCount(function(res){
              _this.cartCount=res.data;
        },function(err){
          return
        });
        window.addEventListener('scroll', this.checkScroll);


    },

    components: {
        navSimple,
        loading

    },
    data(){
      return{
        showDetail:false,
        productId : _mm.getUrlParam('productId')    || '26',
        detailData:"",
        downloadData:"",
        resData:{},
        subImages:[],
        detail:[],
        showLoading:true,
        showFloat:false,
        cartCount:0,
        addCartNum:1,
        bottomScrollY:0,
      }
    },
  }
</script>

<style lang="stylus">
 #app .swiper-slide img{

height: 100vw;
width:100vw;    
  }
.mainBox{
  height:120vh;
}
.loadingbox{
  position:absolute;
  top:45%;
  left:50%;
  margin-left:-33px; 
  z-index:1000;
}
.detailContent img{

      width:100%;
      height:auto;
}

#app
  font-size:16px
  .mainBox
    height:100vh
    .secoundContent
      width:90%
      margin:0 auto
      .titleContent
        margin:10px 5px
        .title
          word-wrap:break-word
        .subtitle
          font-size: 13px;
          color: #81838e;
          line-height: 17px;
          text-align: justify;
      .count
        font-weight:600
        margin:5px 5px;
      .price
        color:rgb(222,64,43);
        font-weight:800
        font-size:24px
      .countContent
          float:right
          background:#f7f7f7
          line-height:30px
          margin-top:-13px
          text-align:center
          .iconfont
            display:inline-block
            font-size:24px
            width:30px
            margin:0 auto
          span
            display:inline-block
            width:40px
            font-size:20px
            line-height:30px
            border-left:1px solid white
            border-right:1px solid white
    .loadingMoreDetail
      width:100%
      height:100px
      background:#f9f9f9
      text-align:center
      line-height:100px
  .detailContent
    width:100%
    min-height:100vh
    overflow:hidden
  .detailFooter
    position:fixed
    bottom:0
    left:0
    width:100%
    height:50px
    display:flex
    background:#f9f9f9
    .boxes
      flex:2
      color:#686868
      text-align: center;
      font-size: 16px;
      padding-top: 8px;
      &.gocheck
        flex:3
        background:rgb(222,63,43)
        lineheight:42px
        font-weight:800
        color:#fff
        padding-top:17px
      &.cartbox
        position:relative
      span
        font-size:12px
      .cartfloat
        position:absolute
        left:50%
        top:5%
        background:rgb(244, 64, 43)
        border-radius:50%
        color:white;
        width:18px;
  .floatContent
    width:100%;
    height:100%;
    background:white;
    position:fixed;
    top:0
    left:0   
    z-index:100  
        
      
    


</style>
